import { FC, useState, useEffect, useRef, useCallback } from 'react'
import { useSelector } from 'react-redux'
import { Dialog, Toast } from 'antd-mobile'

import { payment, checkTradeStatus } from '@/modules/order'

import Reducers from '@/modules'
import { useLocation } from 'react-router-dom'
import { getUrlParams } from '@/utils'

type IStore = ReturnType<typeof Reducers>

type Props = {}

enum PayStatus {
  '待支付',
  '取消支付',
  '支付成功',
  '订单完成',
}

// 组件
const OrderDetail: FC = () => {
  // 支付状态
  const [payStatus, changePayStatus] = useState(0)
  // 非受控组件
  const msgInput = useRef<HTMLInputElement>(null)

  // 获取参数
  const location = useLocation()
  const urlParam = getUrlParams(location.search)

  // 获取redux中的数据
  const store = useSelector(({ orderInfo }: IStore) => orderInfo)

  useEffect(() => {
    // 有这个属性表示从支付环境返回
    if (urlParam.method === 'alipay.trade.wap.pay.return') {
      // 检查是否支付成功
      // out_trade_no
      checkTradeStatus({
        out_trade_no: urlParam.out_trade_no,
      }).then((res: any) => {
        if (res.code === 200) {
          changePayStatus(res.result.status)
          Toast.show({
            content: PayStatus[res.result.status],
          })
        }
      })
    }
  }, [])

  /**
   * 支付的方法
   */
  const confirmPay = useCallback(() => {
    const msg = msgInput.current?.value
    if (!msg) {
      return Toast.show({
        content: '请输入留言什么的',
      })
    }
    // 必须先让用户确认才能进入支付！！！
    Dialog.confirm({
      content: '是否提交支付',
      onConfirm: () => {
        // 调用本地后台的支付接口
        // 具体的参数根据公司接口文档来
        payment({
          ...store,
          body: msg,
          // 支付成功后浏览器返回的地址
          returnUrl: window.location.href,
        }).payload.then((res: any) => {
          console.log(res, '支付接口会把订单的相关信息合并后生成一个支付宝的地址返回给前台')
          if (res.code === 200) {
            // 仍然是提示用户
            Toast.show({
              content: '即将离开本站，进入支付环境',
              // 跳转到支付宝的支付窗口
              afterClose: () => (window.location.href = res.result),
            })
          }
        })
      },
    })
  }, [])

  return (
    <div className="docwrap order-detail">
      <div className="goods-list">还是商品信息什么的一堆</div>

      {payStatus === 0 && (
        <>
          <div className="msg-wrap">
            <input ref={msgInput} type="text" />
          </div>
          <div className="confirm">
            <button onClick={confirmPay}>支付</button>
          </div>
        </>
      )}
    </div>
  )
}

export default OrderDetail
